<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>辽东湾倾斜摄影数据和模型融合的Demo</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var min3dtilesLevel = 19; //3dtiles数据可显示的最小层级

    var waterObjUrl = 'http://36.212.170.187:9000/0723/water/water.obj'; //水面模型地址
    var groundObjUrl = 'http://36.212.170.187:9000/0723/ground/ground.FBX'; //地面模型地址
    var waterModel; //水面模型
    var groundModel; //地面模型
    var isThreeDimension = true; //是否是三维模式

    window.app = new GE.App('mapContainer', {
        // fbx模型数据
        // position: [122.00091004392777,40.70975218860829, 300],
        // lookAt: [122.00091004392777,40.70975218860829, 0],
        
        //辽东湾数据
        // position: [121.97978, 40.75601, 5000],
        // lookAt: [121.97978, 40.75601, 0],
        position: [122.01694702591361, 40.76308926482676, 100000],  //new update
        lookAt: [122.01694702591361, 40.76308926482676, 0],    //new update

        //<!--new update
        //  isLoadSelectRange:true, //是否启用某区域范围内浏览
        // // leftBottom:[121.91857676583558, 40.67178471819924, 0],//区域范围左下点位
        // // rightUp:[122.04743505411345, 40.80460904866403, 0],//区域范围右上点位
        // leftBottom:[121.90857676583558, 40.66178471819924, 0],//区域范围左下点位
        // rightUp:[122.05743505411345, 40.81460904866403, 0],//区域范围右上点位
        //!--new update>

        cameraScrollSpeed: 15,
        minZoom: 12,  //new update
        maxZoom: 21,
        cameraFov: 10, //相机的fov
        ambientLightIntensity: 2,
        // ambientLightType: 'ambient',
        lightDistance: 2000, //光源距离初始相机target的距离
        lightHeight: 50, //光源的高度
        useCarpet: true,
        background: "Sky", //"Fog", "none",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        // maxDataLevel: 20,
        maxSlopeAngle: 35, //地图最大倾斜角度
        extraStep: 4, //额外加载瓦片的步长
        verticalLevel: 15, //地图层级小于等于该层级开时，相机开始垂直正对着地图
        tileDefaultColor: '#D3D3D3', //瓦片默认颜色
        baseLayer: [
             //带自定义基准点和bundle压缩的影像底图
             {
                configUrl: 'http://36.212.170.187:9000/songsandata2/Conf.xml',
                url:       'http://36.212.170.187:9000/songsandata2/_alllayers/{z}/{y}/{x}.png',
                colorSpace: 'srgb', //该图层的纹理使用的颜色空间，默认是''，还有其他参数：'srgb', 'linear', 
                urlDecimal: false, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                mapHeight: 0, //地图的高度, 默认是0
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                maxDataLevel: 21, //该图层的最大数据层级，如果不设置默认是18
                isAdditionalLayer: true, //是否是附加图层
                visible: false, //该图层是否可见
                name: 'imageLayer', //图层的名字
            },
        ]
    });

    load3dtiles();//加载三维地图数据

    var fbxTileModel;
    // openFbxTiles3d();
    function openFbxTiles3d() {//examples\resources\3dtiles\Data\tileset.json
        fbxTileModel = new GE.Tiles3d({
            // url: 'http://localhost:9000/examples/resources/3dtiles/test/3dtiles/root.json', refinement: 1000.0, loadRange: 100,//fbx转换到3dtiles的数据
            url: 'http://36.212.170.187:9000/jfkj/3dtiles/root.json', refinement: 1000.0, loadRange: 100,//fbx转换到3dtiles的数据
            z: 0, //调整数据的高度
            isOpenAdditionalCamera: true, //是否添加预加载的额外相机
            additionCameraFov: 50, //额外相机的fov
            maxJobs: 20,  //优先级队列中每次执行下载解析任务的最大数量。因为这个数据中使用的都是fbx，解析任务很重，所以这个值不能设置的太大
            minSize: 200,
            maxSize: 300,
            isSupportTransparent: true,
            geoSystem: '3857', //4978是椭球坐标系，3857是web墨卡托坐标系。这个参数可以不配置，默认是4978
        });
        app.add(fbxTileModel);
    }

    var threeTileModel;
    // tiles3d(); 
    function tiles3d() {//examples\resources\3dtiles\Data\tileset.json
        threeTileModel = new GE.Tiles3d({
            // url: 'http://192.168.2.44:9000/examples/resources/3dtiles/CIP/3dtileszip/3dtiles/tileset.json', refinement: 50, loadRange: 10,//辽东湾的倾斜摄影数据
            url: 'http://36.212.170.187:9000/jfkj2/3dtiles/tileset.json', refinement: 50, loadRange: 10,//辽东湾的倾斜摄影数据
            z: 10, //调整数据的高度
            minSize: 1000,
            maxSize: 6000,
            // minSize: 0,
            // maxSize: 2000,
            isOpenAdditionalCamera: true, //是否添加预加载的额外相机
            additionCameraFov: 30, //15, //额外相机的fov
            maxJobs: 60, //优先级队列中每次执行下载解析任务的最大数量。因为这个数据很细碎，下载任务很重，所以这个值可以设置的稍大一些
            isSupportTransparent: false,
            isDoubleSide: false,
            geoSystem: '4978', //4978是椭球坐标系，3857是web墨卡托坐标系。这个参数可以不配置，默认是4978
        });
        app.add(threeTileModel);
        // window.tiles3d = threeTileModel;
    }

    function showModel(model) {
        model.visible = true;
        model.isUpdate = true;
    }

    function hideModel(model) {
        model.visible = false;
        model.isUpdate = false;
    }

    window.app.on('Click', function (e) {
        console.log(e);
    });

    window.app.on('ZoomChange', function (e) {
        if(!isThreeDimension) return; 
        
        if(!threeTileModel || !fbxTileModel) return; 

        if(window.app.map.zoom  > min3dtilesLevel){
            threeTileModel.loadCoarseData(false);

            showModel(threeTileModel);
            showModel(fbxTileModel);

            window.app.map.setMaxSlopeAngle(35);
        }else if(window.app.map.zoom  == min3dtilesLevel || (window.app.map.zoom  == min3dtilesLevel-1) ){
            threeTileModel.loadCoarseData(true);

            showModel(threeTileModel);
            showModel(fbxTileModel);

            window.app.map.setMaxSlopeAngle(35);
        }
        else if(window.app.map.zoom  < min3dtilesLevel-1){
            hideModel(threeTileModel);
            hideModel(fbxTileModel);

            window.app.map.setMaxSlopeAngle(60);
        }
    });

    function btn() {
        let self = this;

        let button1 = new GE.Button('加载三维数据', function () {
            self.load3dtiles();
        });
        app.ui.add(button1);

        let button2 = new GE.Button('加载二维数据', function () {
            self.loadImageTiles();
        });
        app.ui.add(button2);
    }
    btn();

    function overAllOutline(){ //整体外围轮廓
        let overallLine = new GE.ShapeObject({
            url: 'http://36.212.170.187:9000/shp/整体边界.shp',
            merge: true, //此参数设置为true后会大幅提升性能但是无法单体化
            lineColor: '#0000CD',
            lineWidth: 5, //线宽
        });
        overallLine.renderOrder = 100;
        app.add(overallLine);
    }

    function industryOutline(){ //园区外围轮廓
        let industryLine = new GE.ShapeObject({
            url: 'http://36.212.170.187:9000/shp/园区边界.shp',
            lineColor: '#00FFFF',
            lineWidth: 15, //线宽 
        });
        industryLine.renderOrder = 100; 
        app.add(industryLine);
    }

    overAllOutline();
    industryOutline();

    // window.app.on('MapDragStart', function (e) {
    //     console.log('地图拖拽开始');
    // });
    // window.app.on('MapDragEnd', function (e) {
    //     console.log('地图拖拽结束');
    // });

    function load3dtiles(){ //加载三维地图数据
        //显示fbx模型
        if(!fbxTileModel){
            openFbxTiles3d();
        }else{
            showModel(fbxTileModel);
            fbxTileModel.tilesRenderer.lruCache.minSize = 200; //恢复手工模型需要的缓存下限
        }

        //显示倾斜摄影数据
        if(!threeTileModel){
            tiles3d();
        }else{
            showModel(threeTileModel);
            threeTileModel.tilesRenderer.lruCache.minSize = 4000; //恢复倾斜摄影数据需要的缓存下限
        }

        //隐藏影像二维底图
        let tileMap = app.map.getTileMap('image', 'imageLayer');
        tileMap.visible = false;

        //加载地面模型和水面模型
        if(groundModel){
            waterModel.visible = true;
            groundModel.visible = true;
        }else{
            groundModel = loadModel(groundObjUrl, 'fbx');
            waterModel = loadModel(waterObjUrl, 'obj', null, modelCallback);
        }

        isThreeDimension = true; //当前为三维模式
        window.app.fireEvent('ZoomChange'); //在ZoomChange事件中会根据当前的层级判断是否显示3dtiles数据
    }

    function loadImageTiles(){ //加载二维地图数据
        //隐藏fbx模型
        if(fbxTileModel){
            hideModel(fbxTileModel);
            fbxTileModel.tilesRenderer.lruCache.minSize = 0; //会清除掉所有的手工模型缓存的数据 
            fbxTileModel.tilesRenderer.update();
        }
        
        //隐藏倾斜摄影数据
        if(threeTileModel){
            hideModel(threeTileModel);
            threeTileModel.tilesRenderer.lruCache.minSize = 0; //会清除掉所有的倾斜摄影缓存的数据
            threeTileModel.tilesRenderer.update();
        }

        //显示影像二维底图
        let tileMap = app.map.getTileMap('image', 'imageLayer');
        tileMap.visible = true;

        //隐藏水面模型和地面模型
        if(groundModel){
            waterModel.visible = false;
            groundModel.visible = false;
        }

        isThreeDimension = false; //当前为二维模式
    }


    function loadModel(url, type, extraUrl, callback) {
        var model = new GE.OverLay({
            type: type,
            url: url,
            mtlUrl: extraUrl,
            position: [122.00265584018825, 40.7647591560364, -10],
            // position: [122.00151626214978, 40.71106690828059, 10.2],
            gltfUpAxis: 'Z',
            // scale: [2, 2, 2],
            changeEmissive: true,
            // rotation: [45, 0, 0],
            success: callback
        });
        // model.renderOrder = -50;
        app.add(model);
        return model;
    }

    function modelCallback(modelParent) {
        let waterOptions = {
                textureWidth: 1024/5,
                textureHeight: 1024/5,

                color: '#1E90FF', //水面颜色，fffff为透明色
                scale: 6, //水纹大小
                reflectivity: 0.02, //反射度【0-1】
                flowX: 1, //X方向水流比例（用于控制水的流动方向）【0-1】
                flowY: 1, //Y方向水流比例（用于控制水的流动方向）【0-1】
                // flowSpeed: 0.08,

                refractMap: 'http://36.212.170.187:9000/0723/image/water_refract.png',
                normalMap0: 'http://36.212.170.187:9000/0723/image/Water_1_M_Normal.jpg',
                normalMap1: 'http://36.212.170.187:9000/0723/image/Water_2_M_Normal.jpg',
            };
        GE.WaterUtilty.setWater(modelParent, waterOptions);
    }
</script>

</html>